<div class="context-right">
<div>
    <div class="current-time">
            <h2 style="color: white">今天</h2>
            <div class="day-msg">
                <p>{{date}}</p>
                <h3>{{show_day}}</h3>
                <p>{{show_week}}</p>
            </div>
    </div>
    <div style="float: right">
      <calendar (onSelected)="onCalendarSelected($event)"></calendar>
    </div>
    </div>
    </div>
    <div style="width: 100%;padding: 10px;">
    <table class="context_col">
             <thead>
                 <tr>
                     <td style="width: 5%">序号</td>
                     <td style="width: 20%">任务分解表</td>
                     <td>时间段</td>
                     <td style="width: 15%">每日简报</td>
                     <td style="width: 6%">状态描述</td>
                 </tr>
             </thead>
             <tbody>
                 <tr  *ngFor="let task of tasks; let i=index">
                     <td>{{i + 1}}</td>
                     <td>
                         <p>{{task.project.name}}</p>
                         <p>{{task.name}}</p>
                         <p>{{task.receiver.name}}</p>
                         <p>工时：{{task.hours + task.ot_hours}}</p>
                     </td>
                     <td>
                       <div class="time-line">
                       <div style="width: 100%; overflow: hidden; height: 100%;">
                         <div class= "time-line-line">
                          <div class="time-line-line-red" [ngStyle]="{'left': task.s_width + '%', 'width': task.s_e_width + '%'}"></div>
                           <div class="line-origin font-style">{{top_date.replace('-', "")}}</div>
                           <div *ngIf="task.s_width >0 " class="line-start" [ngStyle]="{'left': task.s_width + '%'}"><i></i><span class="font-style">{{task.s_date.replace('-', "")}}</span></div>
                           <div class="line-center"><i></i></div>
                           <div *ngFor="let milestone of task.milestones">
                             <div class="line-current" [ngStyle]="{'left': milestone.l_width + '%'}"><i></i><span class="font-style">{{milestone.date.replace('-', "")}}</span></div>
                           </div>
                           <div *ngIf="task.e_width < 100" class="line-over" [ngStyle]="{'left': task.e_width + '%'}"><i></i><span class="font-style">{{task.e_date.replace('-', "")}}</span></div>
                           <div class="line-end font-style">{{bottom_date.replace('-', "")}}</div>
                         </div>
                         </div>
                       </div>
                     </td>
                     <td>
                     <div *ngIf= "task.daily" style="text-align: left;">{{ task.daily.content }}</div>
                     <img  *ngIf= "!task.daily" src="assets/images/blank_daily.png">
                     </td>
                     <td>
                         <div *ngIf="task.state== 'pending'" class="sty sty3" (click)="changeTask(task, 'state', 'processing')"  >
                             <i></i>
                             <div class="clear"></div>
                             未处理
                         </div>
                         <div *ngIf="task.state== 'processing'"  class="sty sty1" (click)="changeTask(task, 'state', 'solved')" >
                             <i></i>
                             <div class="clear"></div>
                             进行中
                         </div>
                         <div *ngIf="task.state== 'solved'" class="sty sty2" (click)="changeTask(task, 'state', 'cancel')">
                             <i></i>
                             <div class="clear"></div>
                             已完成
                         </div>
                          <div *ngIf="task.state== 'cancel'" class="sty sty4" >
                             <i></i>
                             <div class="clear"></div>
                             取消
                         </div>
                     </td>
                 </tr>
             </tbody>
         </table>
</div>

























<!--
<div class="section"><table style="width: 100%;"><tr>
  <td style="width: 420px; vertical-align: top;"><calendar
      (onSelected)="onCalendarSelected($event)"></calendar></td>
  <td style="vertical-align: top; padding-left: 2vw;"><md-card id="show-area"
      *ngIf="user && showDate">
    <md-card-header>
      <md-card-title>{{showDate.y}}年{{showDate.m + 1}}月{{showDate.num}}日
        安排</md-card-title>
      <md-card-subtitle>总工时: {{total_task_hours}}</md-card-subtitle>
    </md-card-header>
    <md-card-content *ngIf="tasks && mine">
      <div class="field" *ngFor="let task of tasks; let i=index">{{i + 1}},
        {{task.name}}, 工时: {{task.day_hours}}/{{task.hours + task.ot_hours}}　
           [<a href="projects/{{task.project_id}}"
            (click)="goProject(task.project)">{{task.project.name}}</a>,
        {{task.s_date}} ～{{task.e_date}}]　
        <md-checkbox *ngIf="mine.id == task.receiver_id && !task.done && !task.processing"
            (change)="changeTask(task, 'processing')"
            [(ngModel)]="task.processing" >标记开始</md-checkbox>
        <span style="color: #3F51B5" *ngIf="!task.done && task.processing">已开始</span>
        <span *ngIf="!task.done && mine.id != task.receiver_id">
          <span *ngIf="!task.processing">未开始</span>
        <md-input-container *ngIf="!task.processing"><input mdInput type="number"
              style="width: 60px" placeholder="期望工时"
              value="{{task.hours + task.ot_hours}}" /></md-input-container>
        </span>
      </div>
    </md-card-content>
  </md-card></td>
</tr></table></div>

-->
